<template>
    <div id="userManagement">
        <div class="container">
            <div class="nav">
                <router-link to="/UserManagement/User">用户</router-link>
                <router-link to="/UserManagement/Manager">管理员</router-link>
                <div class="logout" @click="logout()">退出</div>
            </div>
            <div class="content">
               <router-view></router-view>
            </div>

        </div>
        <!-- 只要在项目中安装和配置了 vue-router ，就可以使用 router-view 这个组件了 -->
        <!-- 它的作用很单纯：占位符 -->
        
    </div>
  </template>
  
  <script>
    export default{
        methods: {
            logout() {
                // 1.清空 token
                localStorage.removeItem('token')
                // 2.跳转到登录页
                this.$router.push('/login')
            }
        }
    }

</script>
  
<style lang="less">
    #userManagement {
       height: 100%;
        .container {
            height: 100%;
            display: flex;
            flex-direction: column;
            .content {
                height:100%;


            }
            .nav {
                display: flex;
                margin: 30px;
                margin-top: 50px;
                margin-bottom: 0px;
                a {
                    display: flex;
                    text-align: center;
                    align-items: center;
                    width: 100px;
                    margin-right: 20px; 
                    color: black;
                    &.router-link-exact-active {
                        font-weight: bold;
                        font-size: 30px
                        // background: #0f6bb1;
                        // box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.3);
                    }
                    // &.router-link-active {
                    //     color: black;
                    //     font-weight: 100px;
                    //     // box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.3);
                    // }
                }
                
                .logout {
                   position: relative;
                   left: 800px;
                   top: 50%;
                }
            }
        }
    }

</style>